<template>
  <view class="discover-container">
    <!-- 顶部导航标签 -->
    <view class="top-tabs">
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'chat' }"
        @click="switchTab('chat')"
      >
        <text class="tab-text">聊天榜</text>
      </view>
      <view 
        class="tab-item" 
        :class="{ active: activeTab === 'painting' }"
        @click="switchTab('painting')"
      >
        <text class="tab-text">绘画榜</text>
      </view>
    </view>
    
    <!-- 内容区域 -->
    <view class="content-area">
      <!-- 聊天榜内容 -->
      <view v-if="activeTab === 'chat'" class="chat-content">
        <scroll-view 
          class="content-scroll" 
          scroll-y="true"
          @scrolltolower="loadMoreChat"
        >
          <view 
            class="chat-item" 
            v-for="(item, index) in chatList" 
            :key="item.id"
          >
            <!-- 排名标签 -->
            <view class="rank-badge" v-if="index < 10">
              <text class="rank-number">{{ index + 1 }}</text>
            </view>
            
            <!-- 内容区域 -->
            <view class="item-content">
              <view class="content-text">
                <text class="main-text" v-html="item.query"></text>
                <view 
                  class="expand-content" 
                  v-if="item.expanded"
                  :class="{ 'expanded': item.response }"
                >
                  <text class="expanded-text" v-html="item.response"></text>
                </view>
              </view>
              
              <!-- 展开/收起按钮 -->
              <view class="expand-btn" @click="toggleExpand(item)">
                <text class="expand-icon">{{ item.expanded ? '▲' : '▼' }}</text>
              </view>
            </view>
            
            <!-- 用户信息和操作 
            <view class="item-footer">
              <view class="user-info">
                <view class="user-avatar">
                  <image :src="item.avatar" class="avatar-image" mode="aspectFit"></image>
                </view>
                <text class="user-id">{{ item.userId }}</text>
              </view>
              
              
            </view>-->
          </view>
          
          <!-- 加载更多提示 -->
          <view class="load-more" v-if="chatLoading">
            <text class="load-text">加载中...</text>
          </view>
        </scroll-view>
      </view>
      
      <!-- 绘画榜内容 -->
      <view v-if="activeTab === 'painting'" class="painting-content">
        <scroll-view 
          class="content-scroll" 
          scroll-y="true"
          @scrolltolower="loadMorePainting"
        >
          <view class="painting-grid">
            <view 
              class="painting-item" 
              v-for="(item, index) in paintingList" 
              :key="index"
              @click="showPaintingDetail(item)"
            >
              <view class="painting-image" v-html="item.response"></view>
              <view class="ai-tag">
                <text class="ai-text">由AI生成</text>
              </view>
            </view>
          </view>
          
          <!-- 加载更多提示 -->
          <view class="load-more" v-if="paintingLoading">
            <text class="load-text">加载中...</text>
          </view>
        </scroll-view>
      </view>
    </view>
    
    <!-- 绘画详情弹窗 -->
    <view class="painting-modal" v-if="showModal" @click="closeModal">
      <view class="modal-content" @click.stop>
        <view class="modal-header">
          <text class="modal-title">绘画详情</text>
          <view class="close-btn" @click="closeModal">
            <text class="close-icon">×</text>
          </view>
        </view>
        <view class="modal-body">
          <view class="painting-info">
            <text class="painting-title">{{ selectedPainting.query }}</text>
            <text class="painting-desc" v-html="selectedPainting.response"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { get } from '../../utils/request.js'
export default {
  data() {
    return {
      activeTab: 'chat',
      chatLoading: false,
      paintingLoading: false,
      showModal: false,
      selectedPainting: {},
      chatList:[],
      paintingList:[],
    }
  },
  
  onLoad() {
    // 检查登录状态
    this.checkLoginStatus()
    // 初始化数据
    this.initData()
  },
  
  methods: {
    // 检查登录状态
    checkLoginStatus() {
      const token = uni.getStorageSync('token')
      if (!token) {
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }
    },
    
    // 切换标签
    switchTab(tab) {
      this.activeTab = tab
    },
    
    // 展开/收起聊天内容
    toggleExpand(item) {
      item.expanded = !item.expanded
    },
    
    // 显示绘画详情
    showPaintingDetail(item) {
      this.selectedPainting = item
      this.showModal = true
    },
    
    // 关闭弹窗
    closeModal() {
      this.showModal = false
      this.selectedPainting = {}
    },
    
    // 初始化数据
    async initData() {
      try {
        // 获取文本内容（聊天榜）
        await this.getFeaturedList('text')
        // 获取图片内容（绘画榜）
        await this.getFeaturedList('image')
      } catch (error) {
        console.error('初始化数据失败:', error)
      }
    },
    
    // 获取精选列表数据
    async getFeaturedList(type) {
      try {
        const response = await get('/api/dify/conversation/featured-list', { type })
        
        if (response && response.data && response.data.list) {
          if (type === 'text') {
            this.chatList = response.data.list
          } else if (type === 'image') {
            this.paintingList = response.data.list.map(item=>{
              return {
                ...item,
                response:'<img src='+item.response.split('<img src=')[1].split('>')[0]+'/>'
              }
            })
          }
        } 
      } catch (error) {
        console.error(`获取${type === 'text' ? '文本' : '图片'}内容失败:`, error)
        throw error
      }
    },
    
    // 加载更多聊天内容
    loadMoreChat() {
      if (this.chatLoading) return
      
      this.chatLoading = true
      
      // 模拟加载更多数据
      setTimeout(() => {
        this.chatLoading = false
        uni.showToast({
          title: '已加载全部聊天内容',
          icon: 'none'
        })
      }, 1000)
    },
    
    // 加载更多绘画内容
    loadMorePainting() {
      if (this.paintingLoading) return
      
      this.paintingLoading = true
      
      // 模拟加载更多数据
      setTimeout(() => {
        this.paintingLoading = false
        uni.showToast({
          title: '已加载全部绘画内容',
          icon: 'none'
        })
      }, 1000)
    }
  }
}
</script>

<style scoped>
.discover-container {
  min-height: 100vh;
  background-color: #3A3052;
}

.top-tabs {
  display: flex;
  background-color: #3A3052;
  padding: 16px 20px;
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tab-item.active {
  background-color: #52496D;
}

.tab-text {
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 500;
}

.tab-item:not(.active) .tab-text {
  color: #8F82A8;
}

.content-area {
	position: fixed;
	    overflow: auto;
	height: 100vh;
	box-sizing: border-box;
	padding: 80px 0 100px;
  flex: 1;
}

.content-scroll {
  height: 100%;
  padding: 0 20px;
}

/* 聊天榜样式 */
.chat-item {
  background-color: #4A4062;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  margin-top: 16px;
  position: relative;
}

.rank-badge {
  position: absolute;
  top: -8px;
  left: 16px;
  width: 32px;
  height: 32px;
  background-color: #8F82A8;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.rank-number {
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
}

.item-content {
  margin-top: 8px;
}

.content-text {
  margin-bottom: 12px;
}

.main-text {
  color: #FFFFFF;
  font-size: 18px;
  line-height: 1.5;
}

.expand-content {
  max-height: 200px;
  overflow-y: auto;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(143, 130, 168, 0.3);
}

.expanded-text {
  color: #8F82A8;
  font-size: 16px;
  line-height: 1.6;
}

.expand-btn {
  text-align: center;
  margin-top: 8px;
}

.expand-icon {
  color: #F0D9B5;
  font-size: 18px;
  cursor: pointer;
}

.item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}

.user-info {
  display: flex;
  align-items: center;
}

.user-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #52496D;
  margin-right: 8px;
  overflow: hidden;
}

.avatar-image {
  width: 100%;
  height: 100%;
}

.user-id {
  color: #8F82A8;
  font-size: 14px;
  margin-right: 8px;
}

.post-date {
  color: #8F82A8;
  font-size: 14px;
  margin-right: 4px;
}

.user-label {
  color: #8F82A8;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.action-btn {
  padding: 6px 12px;
  border: 1px solid #52496D;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:active {
  background-color: #52496D;
}

.action-text {
  color: #FFFFFF;
  font-size: 14px;
}

.vote-btn {
  display: flex;
  align-items: center;
  gap: 4px;
}

.vote-icon {
  color: #E8B070;
  font-size: 14px;
}

/* 绘画榜样式 */
.painting-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px 0;
}

.painting-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
}

.painting-item:active {
  transform: scale(0.95);
}

.painting-image {
  width: 100%;
  height: 160px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
}
.painting-image image{
  height: 100%!important;
  width: auto;
}

.ai-tag {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 4px 8px;
  border-radius: 12px;
  display: flex;
  align-items: center;
}

.ai-text {
  color: #FFFFFF;
  font-size: 12px;
}

/* 弹窗样式 */
.painting-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  width: 90%;
  max-width: 400px;
  background-color: #4A4062;
  border-radius: 16px;
  overflow: hidden;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #52496D;
}

.modal-title {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 600;
}

.close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #52496D;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.close-icon {
  color: #FFFFFF;
  font-size: 22px;
}

.modal-body {
  padding: 0 20px 20px;
}

.modal-image {
  width: 100%;
  height: 300px;
  border-radius: 12px;
  margin-bottom: 16px;
}

.painting-info {
  text-align: center;
}

.painting-title {
  color: #FFFFFF;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 8px;
  display: block;
}

.painting-desc {
  color: #8F82A8;
  font-size: 16px;
  line-height: 1.5;
}
.painting-desc img{
  width: 100%;
  height: auto!important;
}

.load-more {
  text-align: center;
  padding: 20px 0;
}

.load-text {
  color: #8F82A8;
  font-size: 16px;
}
</style>
